import { Avatar, Card, CardBody, CardFooter, CardHeader, Divider } from "@nextui-org/react";
import Grade from "./grade";

export default function Comment(props) {
    return (
        <Card className="comment_components max-w-[513px] min-w-[513px]">
            <CardHeader>
                <p className="comment_content">
                    {props.content}
                </p>
            </CardHeader>
            <Divider />
            <CardBody>
                <div className="comment_user_content flex items-center">
                    <Grade defaultValue={props.star} disabled></Grade>
                    <Avatar src={props.avatar} isBordered={true} size="lg" className="mx-[15px]"/>
                    <div className="comment_user_message text-[14px] font-normal">
                        <div className="nickname comment_user_message_item mb-1">
                            昵称：{props.nickname}
                        </div>
                        <div className="vipType comment_user_message_item mb-1">
                            会员类型：{props.vipType}
                        </div>
                        <div className="use comment_user_message_item">
                            已使用数：{props.use} 次
                        </div>
                    </div>
                </div>
            </CardBody>
            <Divider />
            <CardFooter>
                <p className="comment_team">
                    团队回复：{props.teamReply}
                </p>
            </CardFooter>
        </Card>
    )
}